<script lang="ts" setup>
import { h, ref } from "vue";
import type { MenuProps } from "ant-design-vue";
import router from "../router";

import { MenuOutlined } from "@ant-design/icons-vue";
import { useTagsStore } from "../stores/tags";
import { log } from "console";
const selectedKeys = ref([]);
const openKeys = ref([]);
const items = ref([
  {
    key: "首页",
    icon: () => h(MenuOutlined),
    label: "首页",
    title: "首页",
  },
  {
    key: "仓库管理",
    icon: () => h(MenuOutlined),
    label: "仓库管理",
    title: "仓库管理",
    children: [
      {
        key: "仓库类型",
        label: "仓库类型",
        title: "仓库类型",
      },
      {
        key: "仓库设置",
        label: "仓库设置",
        title: "仓库设置",
      },
    ],
  },
  {
    key: "货品信息",
    icon: () => h(MenuOutlined),
    label: "货品信息",
    title: "货品信息",
    children: [
      {
        key: "货品类型",
        label: "货品类型",
        title: "货品类型",
      },
      {
        key: "货品设置",
        label: "货品设置",
        title: "货品设置",
      },
    ],
  },
  {
    key: "入库管理",
    icon: () => h(MenuOutlined),
    label: "入库管理",
    title: "入库管理",
    children: [
      {
        key: "入库类型",
        label: "入库类型",
        title: "入库类型",
      },
      {
        key: "入库业务",
        label: "入库业务",
        title: "入库业务",
      },
    ],
  },
  {
    key: "出库管理",
    icon: () => h(MenuOutlined),
    label: "出库管理",
    title: "出库管理",
    children: [
      {
        key: "出库类型",
        label: "出库类型",
        title: "出库类型",
      },
      {
        key: "出库业务",
        label: "出库业务",
        title: "出库业务",
      },
    ],
  },
  {
    key: "调拨管理",
    icon: () => h(MenuOutlined),
    label: "调拨管理",
    title: "调拨管理",
  },
  {
    key: "库存盘点",
    icon: () => h(MenuOutlined),
    label: "库存盘点",
    title: "库存盘点",
    children: [
      {
        key: "库存盘盈",
        label: "库存盘盈",
        title: "库存盘盈",
      },
      {
        key: "库存盘亏",
        label: "库存盘亏",
        title: "库存盘亏",
      },
    ],
  },
  {
    key: "借用借出",
    icon: () => h(MenuOutlined),
    label: "借用借出",
    title: "借用借出",
    children: [
      {
        key: "借用",
        label: "借用",
        title: "借用",
        children: [
          {
            key: "借用业务",
            label: "借用业务",
            title: "借用业务",
          },
          {
            key: "借用归还",
            label: "借用归还",
            title: "借用归还",
          },
        ],
      },
      {
        key: "借出",
        label: "借出",
        title: "借出",
        children: [
          {
            key: "借出业务",
            label: "借出业务",
            title: "借出业务",
          },
          {
            key: "借出归还",
            label: "借出归还",
            title: "借出归还",
          },
        ],
      }
    ],
  },
  {
    key: "不合格品",
    icon: () => h(MenuOutlined),
    label: "不合格品",
    title: "不合格品",
  },
  {
    key: "报表统计",
    icon: () => h(MenuOutlined),
    label: "报表统计",
    title: "报表统计",
    children:[
      {
        key:'入库统计',
        label:'入库统计',
        title:'入库统计'
      },
      {
        key:'出库统计',
        label:'出库统计',
        title:'出库统计'
      },
      {
        key:'货品统计',
        label:'货品统计',
        title:'货品统计'
      },
    ]
  },
]);
const handleClick: MenuProps["onClick"] = (menuInfo) => {
  console.log("click ", menuInfo);
  const path = menuInfo.key == "首页" ? "" : menuInfo.key;
  router.push({ path: "/" + path });
  console.log(menuInfo);
};
</script>

<template>
  <div class="w-full min-h-full scroll-auto">
    <a-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      class="w-full"
      mode="inline"
      :items="items"
      @click="handleClick"
    />
  </div>
</template>

<style scoped lang="scss"></style>
